
<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>esp32-car口罩支付前端</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/mqtt.css">
	<script src="js/classie.js"></script>
	<script src="js/segment.js"></script>
	<script src="js/loading-button.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/iview.min.js"></script>
	<script src="js/mqtt.js"></script>
</head>

<body>
	<section class="jq22-container">
		<div id="app">
			<template>
				<div class="container">
					<h1 class="demo-title">口罩贩卖机演示</h1>
					<div class="demo-subtitle">Base on <a href="https://github.com/mqttjs/MQTT.js">MQTT.js</a> <a href="https://github.com/vuejs/">Vue.js</a> for <a
							href="https://www.techfens.com">Esp32-Car</a></div>
					<div class="description">请按下按钮购买口罩</div>
					<div class="description">这是一个模拟支付程序，只需要选择是否支付成功</div>
					<div class="showcase main-showcase">
						<button class="loading-button circular-loading top">点击购买</button>
						<button class="control-button bordered make-it-fail">支付失败</button>
						<button class="control-button bordered make-it-succeed" @click="paysuccess">支付成功</button>
					</div>
			</template>
		</div>
		<script>
			const myVue = new Vue({
				el: '#app',
				data: {
					pay: {
						status: 0,
						client: null,
						options: {
							url: 'ws://150.158.214.32:8083/mqtt',
							topic: 'carctl',
							connectTimeout: 5000,
							clientId: 'connect_all_esp32_mqtt_led_' + new Date().getTime(),
							clean: false,
							keepAliveInterval: 30
						},
					},
				},
				methods: {
				
					paysuccess() {		
						let status = "paysuccess";
						this.mqttPublish(status);
					},
					/**
					 * 发送消息
					 */
					mqttPublish(status) {
						// 向指定topic发送消息，topic要保持一致
						this.pay.client.publish(this.pay.options.topic, status.toString(), {
							qos: 1
						});
					},
					/**
					 * mqtt初始化
					 */
					mqttConf() {
						// 链接mqtt
						this.pay.client = mqtt.connect(this.pay.options.url, this.pay.options);
						// 链接成功回调方法
						this.pay.client.on('connect', function () {
							myVue.$Message.success('连接成功!');
							myVue.pay.client.subscribe(myVue.pay.options.topic, function (err) {
								if (!err) {
									console.log('订阅成功:', myVue.pay.options.topic)
								} else {
									console.log('订阅失败:', myVue.pay.options.topic, err)
								}
							})
						}).on('reconnect', function (error) {
							myVue.$Message.info('正在重连...');
						}).on('error', function (error) {
							myVue.$Message.error('连接失败!');
						}).on('end', function () {
							myVue.$Message.warn('连接断开!');
						}).on('message', function (topic, message) {
						});
					}
				},
				mounted() {
					this.mqttConf();
				}
			});
		</script>
		<script type="text/template" id="circular-loading">
	    <svg width="120px" height="120px">
	        <path class="outer-path" stroke="#fff" d="M 60 60 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"></path>
	        <path class="inner-path" stroke="rgba(255, 255, 255, 0.5)" d="M 60 60 m 0 -30 a 30 30 0 1 1 0 60 a 30 30 0 1 1 0 -60"></path>
	        <path class="success-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 91 21 L 75 45 L 55 75 L 45 65"></path>
	        <path class="error-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 95 25 L 45 75"></path>
	        <path class="error-path2" stroke="#fff" d="M 60 30 A 30 30 0 0 1 81 81 L 45 45"></path>
	    </svg>
	</script>
		<script type="text/template" id="circle-loading">
	    <svg width="120px" height="120px">
	        <circle r="50" cx="60" cy="60" fill="none" stroke="rgba(255, 255, 255, 0.3)"></circle>
	        <circle r="30" cx="60" cy="60" fill="none" stroke="rgba(255, 255, 255, 0.3)"></circle>
	        <path class="outer-path" stroke="#fff" d="M 60 60 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"></path>
	        <path class="inner-path" stroke="#fff" d="M 60 60 m 0 -30 a 30 30 0 1 1 0 60 a 30 30 0 1 1 0 -60"></path>
	        <path class="success-path" stroke="#fff" d="M 60 10 A 50 50 0 0 0 16 36  L 45 65 L 55 75 L 75 45"></path>
	        <path class="error-path" stroke="#fff" d="M 60 10 A 50 50 0 0 0 25 95 L 75 45"></path>
	        <path class="error-path2" stroke="#fff" d="M 60 30 A 30 30 0 0 1 81 81 L 45 45"></path>
	    </svg>
	</script>
		<script type="text/template" id="infinity-loading">
	    <svg width="120px" height="60px">
	        <path class="infinity-path" stroke="#fff" d="M 30 10 a 20 20 0 1 0 0 40 c 20 0 40 -40 60 -40 a 20 20 0 0 1 0 40 c -20 0 -40 -40 -60 -40"></path>
	        <path class="success-path" stroke="#fff" d="M 30 10 C 15 10 35 25 45 35 L 55 45 L 75 15"></path>
	        <path class="error-path" stroke="#fff" d="M 30 10 a 20 20 0 1 0 0 40 Q 40 50 45 45 L 75 15"></path>
	        <path class="error-path2" stroke="#fff" d="M 30 10 Q 40 10 45 15 L 75 45"></path>
	    </svg>
	</script>
		<script src="js/demo-functions.js"></script>
		<script src="js/demo.js"></script>
</body>

</html>